<template>
  <div class="account-security-page">
    <van-nav-bar title="账号与安全" left-text="返回" @click-left="handleBack" />
    <van-cell-group>
      <!-- 基础信息 -->
      <van-cell title="手机号码" :value="phoneNumber" is-link @click="handlePhone" />
      <van-cell title="登录密码" value="修改密码" is-link @click="handlePassword" />
      <van-cell title="实名认证" :value="realNameAuth" is-link @click="handleRealName" />

      <!-- 社交账号绑定入口 -->
      <van-cell title="绑定社交账号" is-link @click="showSocialModal = true" />
    </van-cell-group>

    <!-- 社交账号弹层（展示微信、支付宝等） -->
    <van-popup v-model="showSocialModal" position="bottom" round>
      <van-cell-group>
        <!-- 微信 -->
        <van-cell 
          title="微信" 
          :value="wechatStatus" 
          is-link 
          @click="handleBind('wechat')"
        />
        <!-- 支付宝 -->
        <van-cell 
          title="支付宝" 
          :value="alipayStatus" 
          is-link 
          @click="handleBind('alipay')"
        />
        <!-- 淘宝 -->
        <van-cell 
          title="淘宝" 
          :value="taobaoStatus" 
          is-link 
          @click="handleBind('taobao')"
        />
        <!-- QQ -->
        <van-cell 
          title="QQ" 
          :value="qqStatus" 
          is-link 
          @click="handleBind('qq')"
        />
        <!-- 微博 -->
        <van-cell 
          title="微博" 
          :value="weiboStatus" 
          is-link 
          @click="handleBind('weibo')"
        />
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 模拟数据
const phoneNumber = '+86 192****6686';
const realNameAuth = '未认证';
const wechatStatus = '已绑定'; // 微信绑定状态
const alipayStatus = '未绑定'; // 支付宝绑定状态
const taobaoStatus = '未绑定'; // 淘宝绑定状态
const qqStatus = '未绑定'; // QQ绑定状态
const weiboStatus = '未绑定'; // 微博绑定状态

const showSocialModal = ref(true); // 控制社交账号弹层显示

// 返回的事件函数
const handleBack = () => {
  router.back();
};
const handlePhone = () => {
  console.log('进入手机号修改页面');
};
const handlePassword = () => {
  console.log('进入密码修改页面');
};
const handleRealName = () => {
  router.push('/real-name-auth');
};
const handleBind = (type) => {
  console.log(`处理${type}绑定逻辑`);
  // 这里可对接真实接口，修改绑定状态
};
</script>

<style scoped>
.account-security-page {
  background-color: #f5f5f5;
}
</style>